<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="10" :offset="14">
        <el-row>
          <el-input
              placeholder="请输入邮箱"
              v-model="input"
              style="width: 250px;padding: 20px;"
              clearable>
          </el-input>
          <el-button @click="getuser(input)" type="primary" icon="el-icon-search">搜索</el-button>
        </el-row>
      </el-col>
    </el-row>

    <el-table
        :data="userList"
        border
        stripe
        height="480"
        style="width: 100%;">
      <el-table-column type="index"></el-table-column>
      <el-table-column
          prop="email"
          label="用户邮箱"
          width="250">
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名"
          width="250">

      </el-table-column>
      <el-table-column
          prop="coin"
          width="200"
          label="积分数">

      </el-table-column>
      <el-table-column
          prop="isValid"
          width="190"
          label="状态">
        <template slot-scope="scope">
        <label v-if="scope.row.isValid===1">账号正常</label>
        <label v-if="scope.row.isValid===0" style="color:red ">账号封禁中</label>
        </template>
      </el-table-column>
      <el-table-column
          width="180"
          label="操作">
        <template slot-scope="scope">
          <el-row>

            <i class="el-icon-edit" v-if="scope.row.isValid===1" @click="choose(scope.row)"
               style="position:relative;left:10px"></i>
            <el-button class="el-icon-warning" type="danger" v-if="scope.row.isValid==1"
                       @click="deleteUser(scope.row)"
                       style="position:relative;left:40px;color:#a83939;">封号
            </el-button>
            <el-button class="el-icon-warning-outline" type="primary" v-if="scope.row.isValid==0"
                       style="position:relative;left:30px;"
                       @click="cancelDelete(scope.row)">解封
            </el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        title="编辑信息"
        :visible.sync="panel"
        width="30%"
        :before-close="handleClose">
      <span>
        <div class="demo-input-suffix">
          <el-row>
          邮箱：
            <el-input style="width:250px;padding:10px"
                      :disabled="true"
                      v-model="email"
                      clearable>
              {{ email }}
            </el-input>
          </el-row>
        </div>
       <div>
         <el-row>
          密码：
            <el-input style="width:250px;padding:10px"
                      clearable
                      placeholder="无查看权限"
                      v-model="password">
              {{ password }}
            </el-input>
         </el-row>
        </div>
      <div>
        <el-row>
        积分：
            <el-input style="width:250px;padding:10px"
                      clearable
                      v-model="coin">
              {{ coin }}
            </el-input>
        </el-row>
  </div>
      </span>

      <span slot="footer" class="dialog-footer">
    <el-button @click="panel = false" type="danger">取 消</el-button>
    <el-button type="primary" @click="editUser">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import {deleteUser, cancelUser,editUser, getAllUsers, getUser} from "@/api/api";

export default {
  name: "user",
  data() {
    return {
      input: '',
      userList: [],
      panel: false,
      email: '',
      password: '',
      coin: '',

    }
  },
  mounted() {
    this.getAll();
  },
  methods: {
    cancelDelete(i) {
      cancelUser(i.email).then((res)=>{
        alert(res.data.message);
        location.reload();
      }).catch((e)=>{
        alert(e)
      })
    },
    choose(i) {
      this.email = i.email;

      this.coin = i.coin;
      this.panel = true;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    editUser() {
      let param = {'email': this.email, 'password': this.password}
      this.panel = false;
      editUser(param).then((res) => {
        alert(res.data.message)
        location.reload();
      }).catch((res) => {
        alert(res.data.message);
      })
    },

    deleteUser(i) {
      this.$confirm('此操作将禁言该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = i.email
        deleteUser(id).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'})
          location.reload();
        }).catch((res) => {
          alert(res.data.message);


        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消封号'
        });
      });


    },
    getAll() {
      getAllUsers().then((res) => {
        if (res.data.code === '200') {
          this.userList = res.data.data;
        }else{ console.log(res.data.message)
          console.log(res.data.data);}
      }).catch((res) => {
        console.log(res.data.message)
        console.log(res.data.data);
      })

    },
    getuser(a) {
      getUser(a).then((res) => {
        console.log(res.data);
        if (res.data.code === '200') {
          this.userList = [];
          this.userList.push(res.data.data)
        }
      }).catch((res) => {
        console.log(res.data.message)
      })
    }

  },
}
</script>

<style scoped>
.box-card {
  width: 280px;
  height: 350px;
}
</style>